<template>
  <div class="box">
    <van-sticky class="topsearch">
      <van-search
        v-model="iptVal"
        show-action
        placeholder="请输入城市名或拼音"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </van-sticky>

    <div class="recently" v-if="blockShow == 1">
      <h1>离你最近</h1>
      <van-tag
        plain
        type="primary"
        v-for="item in beforefivelist"
        :key="item.cinemaId"
        @click="toCinemaDetail(item.cinemaId)"
        >{{ item.name }}</van-tag
      >
    </div>

    <div class="cinemalist" v-if="blockShow == 2">
      <ul>
        <li v-for="item in searchlist" :key="item.cinemaId" @click="toCinemaDetail(item.cinemaId)">
          <div class="cinema-if">
            <div class="cinema-name">{{ item.name }}</div>
            <div class="cinema-address">{{ item.address }}</div>
          </div>
          <div class="cinema-rt">
            <div>
              <span class="moneylf">￥{{ item.lowprice / 100.0 }}</span>
              <span class="moneyrt">起</span>
            </div>
          </div>
          <div class="address">距离未知</div>
        </li>
      </ul>
    </div>

    <div class="nolist" v-if="blockShow == 3">
      <img src="../assets/images/cinema.png" />
      <p>没有找到匹配的影院</p>
      <p>提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？</p>
    </div>
  </div>
</template>

<script>
import http from "../request/http";
export default {
  name: "cinemaSearch",
  data() {
    return {
      iptVal: "",
      originalcinema: [],
      beforefivelist: [],
      blockShow: 1,
      arr: []
    };
  },
  computed: {
    searchlist() {
      if (this.iptVal == "") {
        this.blockShow = 1;
        return [];
      }
      const arr = this.originalcinema.filter(p => {
        return (
          p.name.toUpperCase().includes(this.iptVal.toUpperCase()) ||
          p.address.toUpperCase().includes(this.iptVal.toUpperCase())
        );
      });
      this.arr = arr;
      if (arr.length == 0) {
        this.blockShow = 3;
        return [];
      }
      return arr;
    }
  },
  methods: {
      toCinemaDetail(id){
          this.$router.push('/cinemadetail/' + id)
      },
    onSearch() {
      if (this.arr.length == 0) {
        this.blockShow = 3;
      }
    },
    onCancel() {
      this.$router.back();
    },
    onInput() {
      this.blockShow = 2;
    }
  },
  mounted() {
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=7845835`,
      headers: {
        "X-Host": "mall.film-ticket.cinema.list"
      }
    }).then(res => {
      if (res.status == 0) {
        this.originalcinema = res.data.cinemas;
        this.beforefivelist = res.data.cinemas.splice(0, 5);
      }
    });
  }
};
</script>
<style scoped>
.topsearch {
  border-bottom: 1px solid #ededed;
}
h1{
    height:25px;
    line-height:25px;
    padding:10px;
    font-size:12px;
    color:#191a1b;
    font-weight:normal;
}
.van-tag {
  font-size: 14px;
  margin-left:10px;
  margin-right: 15px;
  margin-bottom: 15px;
  color:#010;
  background-color:#efefef;
  padding:3px;
}
</style>
